/**
* PageBottom 组件
* 功能：自定义底部导航栏
*
* 特性：
* 1. 支持自定义导航项配置
* 2. 支持自定义事件处理或默认页面跳转
* 3. 使用uni-icons图标
* 4. 优先使用pageUrl判断当前激活项，其次使用currentIndex
* 5. 支持点击事件
* 6. 适配底部安全区域
*/
<template>
    <view class="bottom-container">
        <!-- 导航栏主体 -->
        <view class="nav-bar">
            <!-- 导航项 -->
            <view v-for="(item, index) in navItems" :key="index" class="nav-item" :class="{ active: isActive(index) }"
                @click="handleNavClick(index, item)">
                <!-- 图标 -->
                <view class="nav-icon">
                    <uni-icons :type="item.icon" :size="28" :color="isActive(index) ? activeColor : textColor">
                    </uni-icons>
                </view>
                <!-- 文字 -->
                <text class="nav-text" :style="{ color: isActive(index) ? activeColor : textColor }">
                    {{ item.text }}
                </text>
            </view>
        </view>
        <!-- 底部安全区域占位 -->
        <view class="safe-area-bottom"></view>
    </view>
</template>

<script>
import { defineComponent, computed, ref, onMounted } from 'vue';
import { storage } from '@/library/storage.js';

export default defineComponent({
    name: 'PageBottom',
    props: {
        // 当前页面路径
        pageUrl: {
            type: String,
            default: ''
        },
        // 当前激活的索引（作为备选）
        currentIndex: {
            type: Number,
            default: 0
        },
        // 导航项配置
        navItems: {
            type: Array,
            default: () => [
                {
                    text: '首页',
                    path: '/pages/Index',
                    icon: 'home',
                    selectedIcon: 'home-fill',
                    color: '#007AFF',
                    selectedColor: '#007AFF',
                    isShow: true
                },
                {
                    text: '个人中心',
                    path: '/pages/Personal',
                    icon: 'person',
                    selectedIcon: 'person-fill',
                    color: '#007AFF',
                    selectedColor: '#007AFF',
                    isShow: true
                }
            ]
        },
        // 是否自定义事件处理
        customEvent: {
            type: Boolean,
            default: false
        },
        // 文字颜色
        textColor: {
            type: String,
            default: '#666666'
        },
        // 激活状态文字颜色
        activeColor: {
            type: String,
            default: '#007AFF'
        },
        // 背景颜色
        backgroundColor: {
            type: String,
            default: '#ffffff'
        },

    },
    setup(props, { emit }) {
        // ===== 响应式对象 =====
        const bottomNavHeight = ref(60); // 底部导航栏高度（px）
        const bottomSafeAreaHeight = ref(0); // 底部安全区域高度（px）

        // ===== 方法函数 =====
        // 判断当前项是否激活
        const isActive = (index) => {
            // 优先使用pageUrl判断
            if (props.pageUrl) {
                return props.pageUrl === props.navItems[index].path;
            }
            // 备选使用currentIndex
            return props.currentIndex === index;
        };

        // 处理导航点击
        const handleNavClick = (index, item) => {
            // 如果当前项已经激活，不做处理
            if (isActive(index)) {
                return;
            }

            // 如果启用自定义事件处理，则交给父组件处理
            if (props.customEvent) {
                emit('navClick', {
                    index,
                    item,
                    navItems: props.navItems
                });
                return;
            }

            // 默认处理：使用switchTab进行页面切换
            handleDefaultNavigation(item);
        };

        // 默认导航处理
        const handleDefaultNavigation = (item) => {
            // 使用switchTab进行页面切换
            uni.reLaunch({
                url: item.path,
                animationType: 'slide-in-right',
                success: () => {
                    console.log('页面切换成功:', item.path);
                },
                fail: (err) => {
                    console.error('页面切换失败:', err);
                    // 如果switchTab失败，尝试使用reLaunch
                    uni.reLaunch({
                        url: '/pages/Index',
                        animationType: 'slide-in-right',
                        fail: (err) => {
                            console.error('跳转首页失败:', err);
                        }
                    });
                }
            });
        };

        // ===== 初始化设备信息 =====
        const initDeviceInfo = () => {
            // 获取设备信息
            const storedDeviceInfo = storage.getDeviceInfo();
            if (storedDeviceInfo) {
                // 根据设备信息调整底部导航栏高度
                const { ui } = storedDeviceInfo;
                if (ui) {
                    // 基础底部导航栏高度（px）
                    const baseBottomNavHeight = 60;

                    // 设置底部导航栏高度（只包含导航栏本身，不包含虚拟键）
                    bottomNavHeight.value = baseBottomNavHeight;

                    // 设置底部安全区域高度
                    bottomSafeAreaHeight.value = ui.bottomSafeHeight || 0;

                    console.log('PageBottom底部导航设备信息:', {
                        platform: storedDeviceInfo.platform,
                        bottomNavHeight: bottomNavHeight.value,
                        bottomSafeAreaHeight: bottomSafeAreaHeight.value,
                        virtualKeyHeight: ui.virtualKeyHeight,
                        bottomSafeHeight: ui.bottomSafeHeight,
                        totalBottomHeight: totalBottomHeight.value
                    });
                }
            } else {
                console.warn('未找到设备信息，使用默认值');
            }
        };

        // ===== 生命周期 =====
        onMounted(() => {
            initDeviceInfo();

            // 向父组件发送底部导航高度信息（所有高度数据均为px单位）
            emit('heightChange', {
                bottomNavHeight: bottomNavHeight.value,
                bottomSafeAreaHeight: bottomSafeAreaHeight.value,
                totalBottomHeight: totalBottomHeight.value
            });
        });

        // ===== 计算属性 =====
        // 计算总底部高度（底部导航栏 + 底部安全区域）
        const totalBottomHeight = computed(() => {
            return bottomNavHeight.value + bottomSafeAreaHeight.value;
        });

        // ===== 返回数据和方法 =====
        return {
            bottomNavHeight,
            bottomSafeAreaHeight,
            totalBottomHeight,
            isActive,
            handleNavClick,
            handleDefaultNavigation
        };
    }
});
</script>

<style lang='less' scoped>
.bottom-container {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background-color: v-bind('backgroundColor');
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

    .nav-bar {
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: v-bind('bottomNavHeight + "px"');

        .nav-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            transition: all 0.3s;

            .nav-icon {
                display: flex;
                align-items: center;
                justify-content: center;
                transition: transform 0.3s ease;
            }

            .nav-text {
                font-size: 26rpx;
                line-height: 1;
                transition: all 0.3s ease;
                font-weight: 500;
                text-align: center;
            }

            &.active {
                transform: scale(1.02);

                .nav-icon {
                    transform: scale(1.1);
                }

                .nav-text {
                    font-weight: 600;
                }
            }
        }
    }

    // 底部安全区域
    .safe-area-bottom {
        height: v-bind('bottomSafeAreaHeight + "px"');
        background-color: v-bind('backgroundColor');
    }
}
</style>